<template>
  <div class="containerBox">

    <div id="container" style="width: 750px; height: 750px"></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, markRaw, ref } from 'vue';
// bpmn-js相关
import BpmnModeler from 'bpmn-js/lib/Modeler';
import 'bpmn-js/dist/assets/diagram-js.css'; // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

let bpmnModeler: any = null
onMounted(() => {
  const containerEl = document.getElementById('container');
  bpmnModeler = new BpmnModeler({
    container: containerEl!,
  })
})
</script>
<style>
.containerBox {
  width: 750px;
  height: 750px;
  border: 1px solid #ccc;
  margin-top: 30px;
  display: flex;
  background: url("") repeat !important;
}
</style>
